<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>网络货运平台省运管数据控制台</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .layui-input-block {
            margin-left: 0;
            margin-right: 10px
        }

        .layui-layout-admin {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
        }

        .layui-layout-admin .layui-footer {
            padding: 10px 0;
            text-align: center;
            left: 0
        }
    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px 15px 120px;">
    <form class="layui-form" action="" lay-filter="form-post" id="userForm" method="post">
        <div class="layui-row">
            <div class="layui-col-xs3">
                <div class="layui-form-item" id="payAcc">
                    <div class="layui-input-block">
                        <select id="bankcard" name="bankcardId" lay-filter="bankcard" lay-verify="required"></select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs3">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="dateRange" id="dateRange" placeholder="请选择日期范围">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="inAccNo" placeholder="收款账号(选)">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs2">
                <div class="layui-form-item" style="text-align: center">
                    <a class="layui-btn" lay-submit="" lay-filter="post-btn">查询</a>
                </div>
            </div>
        </div>
    </form>

    <!--表格--->
    <table class="layui-table layui-form" lay-filter="form-table" id="parentTbody">
        <colgroup>
            <col width="42">
            <col>
            <col>
            <col min-width="150">
            <col min-width="150">
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th><input type="checkbox" lay-filter="allSelect" lay-skin="primary"></th>
            <th>记录序号</th>
            <th>收款账号</th>
            <th>收款方名称</th>
            <th>收款方银行名称</th>
            <th>记账日期</th>
            <th>交易金额</th>
        </tr>
        </thead>
        <tbody class="flow-default" id="LAY_demo1"></tbody>
    </table>

    <!--底部 提交按钮-->
    <div class="layui-layout-admin layui-form" lay-filter="form-download">
        <div class="layui-footer layui-row">
            <div class="layui-col-xs10" style="height: 32px">
                <div class="layui-form-item">
                    <label class="layui-form-label">PDF排版</label>
                    <div class="layui-input-inline">
                        <select name="pdfNum" lay-filter="aihao">
                            <option value="T">一页三张</option>
                            <option value="Y">一页四张</option>
                            <option value="N">一页一张</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs2">
                <a id="text9" class="layui-btn" lay-submit="" lay-filter="post-download">
                    <i class="layui-icon">&#xe605;</i>下载(<span id="selectCount">0</span>)
                </a>
            </div>
        </div>
    </div>
    <!--隐藏模板 -->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="detail">详情</a>
    </script>
</div>

<script src="../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'form', 'laypage', 'laydate', 'flow'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, laydate = layui.laydate, flow = layui.flow, util = layui.util;
        let bankcardList, outAccNo, inAccNo, beginDate, endDate;
        let allFlowList = [], checkSeqNoList = [];
        const nowDate = util.toDateString(new Date(),'yyyy-MM-dd');

        //函数栈
        queryPayBankCard(function (cardList) {
            bankcardList = cardList;
            bindOptions($("#bankcard"), '选择交易账户', cardList, (item) => item.id, function (item) {
                const endNo = item['bankAccNo'].substring(item['bankAccNo'].length - 4, item['bankAccNo'].length);
                return item['bankName'] + "(****" + endNo + ')';
            });
            form.render(null, 'form-post');
        });

        //上传完毕 提交表单
        form.render(null, 'form-post');
        form.on('submit(post-btn)', function (data) {
            const bankcardId = data.field.bankcardId;
            let filter = bankcardList.filter(item => item.id === bankcardId);
            const bankcard = filter.length > 0 ? filter[0] : null;
            if (bankcard==null) return ;
            outAccNo = bankcard['bankAccNo'];
            if (data.field.dateRange == null) return;
            let split = data.field.dateRange.split("至");
            beginDate = split[0];
            endDate = split[1];
            inAccNo = data.field.inAccNo;
            loadFlowData();
            return false;
        });

        //加载流数据
        function loadFlowData() {
            allFlowList = [];
            $("#LAY_demo1").remove();
            $("#parentTbody").append("<tbody class=\"flow-default\" id=\"LAY_demo1\"></tbody>");
            flow.load({
                elem: '#LAY_demo1',  //流加载容器
                isAuto: false,
                done: function (page, nextCallBack) { //执行下一页的回调
                    admin.req({
                        url: "/platform/pab/reqTradeReceiptList",
                        data: {outAccNo: outAccNo, inAccNo: inAccNo, beginDate: beginDate, endDate: endDate, page: page, limit: 30},
                        done: function (res) {
                            if (res.data == null) return;
                            const hasNext = res.data['endFlag'] === 'N';
                            const dataList = res.data['itemList'] ?? [];
                            if (dataList.length===0) return;
                            const lis = [];
                            for (let i = 0; i < dataList.length; i++) {
                                allFlowList.push(dataList[i]);
                                lis.push(bindItem(dataList[i]));
                            }
                            nextCallBack(lis.join(''), hasNext); //hasNext 银行返回的是否有下一页的执行
                            $(".layui-flow-more").css({"position": "absolute", "width": "calc(100% - 30px)"});
                            form.render('checkbox');
                            //单选时刷新 数量
                            for (let i = 0; i < dataList.length; i++) {
                                form.on('checkbox(' + dataList[i]['seqNo'] + ')', function (data) {
                                    $("#selectCount").text($(".tableBox:checked").length);
                                });
                            }
                        }
                    });
                }
            });
        }

        /// 获取HTML添加项
        function bindItem(item) {
            return "<tr><td><input type='checkbox' lay-filter='" + item['seqNo'] + "' class='tableBox' name='" + item['seqNo'] + "' lay-skin='primary'></td><td>" + item['seqNo']
                + "</td><td>" + item['inAccNo'] + "</td><td>" + item['inAccName'] + "</td><td>"
                + item['inBranchName'] + "</td><td>" + item['accountDate'] + "</td><td>" + item['amount'] + "</td></tr>";
        }

        //全选事件
        form.render(null, 'form-table');
        form.on('checkbox(allSelect)', function (data) {
            const tableBoxElm = $(".tableBox");
            if (data.elem.checked) {
                tableBoxElm.prop("checked", true)
            } else {
                tableBoxElm.prop("checked", false)
            }
            form.render('checkbox');
            $("#selectCount").text($(".tableBox:checked").length);
        });

        ////save
        form.render(null, 'form-download');
        form.on('submit(post-download)', function (data) {
            const seqNoList = [], itemList = [];
            $(".tableBox:checked").each(function () {
                seqNoList.push($(this).attr("name"));
            });
            const list = allFlowList.filter((item) => seqNoList.indexOf(item['seqNo'] !== -1));
            for (const item of list) {
                itemList.push({seqNo:item["seqNo"],accountDate:item["accountDate"],receiptType:item["receiptType"]});
            }
            layer.confirm('确认生成PDF文件并提交下载任务?', {icon: 3, title:'提示'}, function(index){
                const pdfNum = data.field.pdfNum;
                admin.req({
                    url: "/platform/pab/createReceiptDownloadPDF",
                    data: {outAccNo: outAccNo, inAccNo: inAccNo, beginDate: beginDate, endDate: endDate,pdfNum:pdfNum,itemListJson:JSON.stringify(itemList)},
                    done: function (res) {
                        layer.msg("提交成功，请前往下载任务查看结果", {offset: 'auto', icon: 1,time:1000});
                    }
                });
            })
        });

        //日期时间选择器
        laydate.render({
            elem: '#dateRange',
            type: 'date',
            range: '至',
            value: nowDate+" 至 "+nowDate,
            min: -360,
            max: util.toDateString(new Date(),'yyyy-MM-dd'),
        });

        //绑定下拉选项
        function bindOptions(jqElm, hint, dataList, valueBack, labelBack) {
            jqElm.empty();
            jqElm.append('<option value="">' + hint + '</option>');
            for (let item of dataList) {
                jqElm.append('<option value="' + valueBack(item) + '">' + labelBack(item) + '</option>');
            }
        }

        //获取付款人（平台）银行卡列表
        function queryPayBankCard(callback) {
            admin.req({
                url: "/platform/bank/getBankCardList",
                data: {"bankShortName": "SPABANK"},
                done: function (res) {
                    callback(res.data);
                }
            });
        }
    });
</script>
</body>
</html>